<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>注册页面</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <link rel="stylesheet" type="text/css" href="/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/fonts/iconic/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="/css/util.css">
    <link rel="stylesheet" type="text/css" href="/css/main.css">
</head>

<body>

<div class="limiter">
    <div class="container-login100" bgcolor="#000000">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
            <form class="login100-form validate-form" action="/getPassword-form" method="post">
                <span class="login100-form-title p-b-49">找回密码</span>

                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
                    <span class="label-input100">用户名</span>
                    <input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off" id="username">
                    <span class="focus-input100" data-symbol="&#xf206;"></span>
                </div>


                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入邮箱">
                    <span class="label-input100">邮箱</span>
                    <input class="input100" type="email" name="email" placeholder="请输入邮箱" autocomplete="off" id="email">
                    <span class="focus-input100" data-symbol="&#xf206;"></span>
                </div>
                <div>

                </div>
                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入邮箱验证码">
                    <span class="label-input100">邮箱验证码：</span>
                    <input placeholder="请输入邮箱验证码" type="text" name="codeInput"/>
                    <a id="sendCheckCode" href="#">获取验证码</a>
                </div>
                <div class="text-right p-t-8 p-b-31">

                </div>
                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button class="login100-form-btn" type="submit">提 交</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
</body>



<script type="text/javascript">

    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    var sendCheckCode =document.getElementById("sendCheckCode");

    sendCheckCode.onclick = function () {
        var email = document.getElementById("email").value;
        var username = document.getElementById("username").value;
        if (email == null || email == ""){
            alert("请输入邮箱！！！");
            return;
        }
        if (username == null || username == ""){
            alert("请输入用户名！！！");
            return;
        }
        if(!reg.test(email)) {
            sendCheckCode.innerHTML='我日你妈逼';
            alert("邮箱格式不对，请重新输入邮箱！！！");
            return;
        }

        var num=60;
        var timeout;
        $.ajax({
            type: "get",
            url: "/getPasswordCodeEmail?email="+email + "&&username="+username,
            success:function countDown(flag){
                if(flag == 200){
                    alert("发送验证码成功");
                    function show(){
                        num--;
                        sendCheckCode.innerHTML=num+'s后重新获取';
                        if(num<=0){
                            clearTimeout(timeout);
                            num=60;
                            sendCheckCode.innerHTML='获取验证码';
                        }else{
                            timeout=setTimeout(show,1000);
                        }
                    }
                }else if(flag==500){
                    alert("用户名和邮箱不匹配，请重新输入");
                    window.location='/getPassword';
                }
            }
        });
    }
</script>


<script src="/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="/js/main.js"></script>
</html>